<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>bootstrap 排班</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container" style="height: 3000px">
      <h2>段落</h2>
      <p>
        日前，品牌定位专家顾均辉在一场公开论坛上发言称，农夫山泉自称是天然水，而天然水就是“水库水”，恒大冰泉的水质要远远优于农夫山泉
      </p>

      <p>
        对此，农夫山泉客服23日回应称，农夫山泉在瓶身上明确注明是天然水，相关标签经过国家严格审核，都是真实的。“顾均辉的说法属于言论自由，（我们）无权干涉，但若对公司造成影响，会向上级部门反映。
      </p>

      <p>你必须要<mark>非常努力</mark>, 才能看起来<mark>毫不费力</mark></p>

      <p>
        不要 <s>998</s>, 不要 <s>888</s>, 只需要 <b>198</b>,
        <i>自行车马上骑回家</i>
      </p>

      <p>
        <u>全年GDP为1260582亿元</u
        >，增长5.2%。去年经济增量超过6万亿元，相当于一个中等国家一年的经济总量。
      </p>

      <p><small>增长5.2%。去年经济增量超过6万亿元，相</small></p>

      <h3>文本对齐</h3>
      <p>去年经济增量超过</p>
      <p class="text-center">去年经济增量超过</p>
      <p class="text-right">去年经济增量超过</p>

      <h3>大小写</h3>
      <p class="text-lowercase">Lowercased text.</p>
      <p class="text-uppercase">Uppercased text.</p>
      <p class="text-capitalize">Capitalized text.</p>

      <h3>缩略语</h3>
      <p>
        人类总不会寂寞，因为生命是进步的，是乐天的。一一
        <abbr title="周树人, 1881年9月25日—1936年10月19日">鲁迅</abbr>
      </p>

      <h3>引用</h3>
      <blockquote>
        <p>知之愈明，则行之愈笃;行之愈笃，则知之益明</p>
        <footer>朱熹</footer>
      </blockquote>

      <blockquote class="blockquote-reverse">
        <p>知之愈明，则行之愈笃;行之愈笃，则知之益明</p>
        <footer>朱熹</footer>
      </blockquote>

      <h3>列表</h3>
      <h4>无序列表</h4>
      <ul>
        <li>苹果</li>
        <li>橘子</li>
        <li>石榴</li>
      </ul>
      <h4>有序列表</h4>
      <ol>
        <li>打开冰箱门</li>
        <li>放入大象</li>
        <li>关闭冰箱门</li>
      </ol>
      <h4>取消列表前面的结构</h4>
      <ul class="list-unstyled">
        <li>苹果</li>
        <li>橘子</li>
        <li>石榴</li>
      </ul>

      <h4>水平排版</h4>
      <ul class="list-inline">
        <li>苹果</li>
        <li>橘子</li>
        <li>石榴</li>
      </ul>

      <h3>描述</h3>
      <dl>
        <dt>Description lists</dt>
        <dd>A description list is perfect for defining terms.</dd>
        <dt>Euismod</dt>
        <dd>
          Vestibulum id ligula porta felis euismod semper eget lacinia odio sem
          nec elit.
        </dd>
        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
        <dt>Malesuada porta</dt>
        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
      </dl>

      <h3>代码</h3>
      <p>你可以使用 <code>console.log</code> 在控制台做一下输出, 你可以使用 <kbd>ctrl + shift + i</kbd> 打开控制台</p>, 代码示例:
<pre>
var div = document.querySelector('div');
div.onclick = function(){
  this.style.background = '#aef';
}
</pre>
    
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>
